<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-shrink收缩空间</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .main {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    .flex-wrapper {
      display: flex;
      height: 500px;
      border: 2px solid #039145;
    }
    .item {
      background: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 2;
    }
    .item1 {
      background: #eee;
      flex-basis: 300px;
    }
    .item2 {
      background: #ccc;
      flex-basis: 150px;
    }
    .item3 {
      flex-basis: 250px;
      border: 1px solid #f0f;
    }
    .block-none,.block-none2 {
      display: none;
    }
    .box-sub-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body style="display: flex;">
  <div class="main">
    <h2>正常设置flex-basis。设置第一个盒子300px，第二个盒子150px，拖动宽度，观察效果</h2>
    <div class="flex-wrapper" id="box">
      <div class="item item1">
        <div class="box-sub-item">
          <p>flex-basis</p>
          <p>300px</p>
          <p>实际尺寸：</p>
          <p id="actual-size1">300px</p>
          <p class="block-none">减少了：</p>
          <p class="block-none" id="flex-basis-reduced-num1"></p>
        </div>
      </div>
      <div class="item item2">
        <div class="box-sub-item">
          <p>flex-basis</p>
          <p>150px</p>
          <p>实际尺寸：</p>
          <p id="actual-size2">150px</p>
          <p class="block-none">减少了：</p>
          <p class="block-none" id="flex-basis-reduced-num2"></p>
        </div>
      </div>
    </div>
    
    <form action="" class="main">
      <label>
        <input id="range" type="range" min="300" max="600" value="600" style="width: 300px;" />
        <span id="rangeValue">600px</span>
      </label>
    </form>
  </div>
 
  <div class="main">
    <h1>动手操作，搞懂flex-shrink的作用</h1>
    <div class="flex-wrapper" id="flexShrinkBox">
      <div class="item item3" id="flexShrinkLeftBox">
        <div class="box-sub-item">
          <p>flex-basis</p>
          <p>250px</p>
          <p>flex-shrink</p>
          <p id="flexShrinkValue">1</p>
          <p>实际尺寸：</p>
          <p id="actual-size11">250px</p>
          <p class="block-none block-none2">减少了：</p>
          <p class="block-none block-none2" id="flex-basis-reduced-num11"></p>
        </div>
      </div>
      <div class="item item3" id="flexShrinkRightBox">
        <div class="box-sub-item">
          <p>flex-basis</p>
          <p>250px</p>
          <p>flex-shrink</p>
          <p>1</p>
          <p>实际尺寸：</p>
          <p id="actual-size22">250px</p>
          <p class="block-none block-none2">减少了：</p>
          <p class="block-none block-none2" id="flex-basis-reduced-num22"></p>
        </div>
      </div>
    </div>
    <form action="" class="main">
      <h4>拖动观察效果，控制左边盒子flex-shrink的值</h4>
      <label>
        <input id="range22" type="range" min="1" max="6" value="1" style="width: 300px;" />
        <span id="rangeValue22">1</span>
      </label>
      <h4>拖动宽度，观察效果</h4>
      <label>
        <input id="range2" type="range" min="300" max="600" value="600" style="width: 300px;" />
        <span id="rangeValue2">600px</span>
      </label>
    </form>
  </div>
  
  <script>
    window.onload = function () {
      // 左边盒子控制逻辑
      let rangeDom = document.querySelector('#range');
      let rangeValueDom = document.querySelector('#rangeValue');
      rangeDom.addEventListener('input', function () {
        let width = this.value;
        let boxDom = document.querySelector('#box');
        boxDom.style.width = width + 'px';
        rangeValueDom.innerHTML = width + 'px';
        if (width < 454) {
          document.querySelectorAll('.block-none').forEach(item => item.style.display = 'block')
        } else {
          document.querySelectorAll('.block-none').forEach(item => item.style.display = 'none')
        }
        
        let actualSize1 = document.querySelector('#actual-size1');
        let flexBasisReducedNum1 = document.querySelector('#flex-basis-reduced-num1');
        let actualSize2 = document.querySelector('#actual-size2');
        let flexBasisReducedNum2 = document.querySelector('#flex-basis-reduced-num2');
        let item1 = document.querySelector('.item1');
        let item2 = document.querySelector('.item2');
        actualSize1.innerHTML = item1.offsetWidth + 'px';
        actualSize2.innerHTML = item2.offsetWidth + 'px';
        let width1 = 300 - item1.offsetWidth;
        let width2 = 150 - item2.offsetWidth;
        let num1 = (width1 / 300).toFixed(2);
        let num2 = (width2 / 150).toFixed(2);
        
        flexBasisReducedNum1.innerHTML = `${width1}px(${Math.floor(num1*100)}%)`;
        flexBasisReducedNum2.innerHTML = `${width2}px(${Math.floor(num2*100)}%)`;
      })
      
      // 右边盒子控制逻辑
      let flexShrinkBoxDom = document.querySelector('#flexShrinkBox');
      let flexShrinkValueDom = document.querySelector('#flexShrinkValue');
      let rangeDom2 = document.querySelector('#range2');
      let rangeValueDom2 = document.querySelector('#rangeValue2');
      let actualSize11Dom = document.querySelector('#actual-size11');
      let flexBasisReducedNum11Dom = document.querySelector('#flex-basis-reduced-num11');
      let actualSize22Dom = document.querySelector('#actual-size22');
      let flexBasisReducedNum22Dom = document.querySelector('#flex-basis-reduced-num22');
      // 拖动宽度逻辑
      rangeDom2.addEventListener('input', function () {
        let width = this.value;
        rangeValueDom2.innerHTML = width + 'px';
        flexShrinkBoxDom.style.width = width + 'px';
        let flexShrinkLeftBoxDom = document.querySelector('#flexShrinkLeftBox');
        let flexShrinkRightBoxDom = document.querySelector('#flexShrinkRightBox');
        const leftWidth = flexShrinkLeftBoxDom.offsetWidth;
        const rightWidth = flexShrinkRightBoxDom.offsetWidth;
        actualSize11Dom.innerHTML = leftWidth + 'px';
        actualSize22Dom.innerHTML = rightWidth + 'px';
        if (width <= 500) {
          document.querySelectorAll('.block-none2').forEach(item => item.style.display = 'block')
        } else {
          document.querySelectorAll('.block-none2').forEach(item => item.style.display = 'none')
        }
        flexBasisReducedNum11Dom.innerHTML = `${250 - leftWidth}px(${Math.floor((250 - leftWidth)/250*100)}%)`;
        flexBasisReducedNum22Dom.innerHTML = `${250 - rightWidth}px(${Math.floor((250 - rightWidth)/250*100)}%)`;
      })
      
      let rangeDom22 = document.querySelector('#range22');
      let rangeValueDom22 = document.querySelector('#rangeValue22');
      // 拖动flex-shrink逻辑
      rangeDom22.addEventListener('input', function () {
        let flexShrinkValue = this.value;
        rangeValueDom22.innerHTML = flexShrinkValue;
        flexShrinkValueDom.innerHTML = flexShrinkValue;
        
        let flexShrinkLeftBoxDom = document.querySelector('#flexShrinkLeftBox');
        let flexShrinkRightBoxDom = document.querySelector('#flexShrinkRightBox');
        flexShrinkLeftBoxDom.style.flexShrink = flexShrinkValue;
        const leftWidth = flexShrinkLeftBoxDom.offsetWidth;
        const rightWidth = flexShrinkRightBoxDom.offsetWidth;
        actualSize11Dom.innerHTML = leftWidth + 'px';
        actualSize22Dom.innerHTML = rightWidth + 'px';
        flexBasisReducedNum11Dom.innerHTML = `${250 - leftWidth}px(${Math.floor((250 - leftWidth)/250*100)}%)`;
        flexBasisReducedNum22Dom.innerHTML = `${250 - rightWidth}px(${Math.floor((250 - rightWidth)/250*100)}%)`;
      })
    }
  </script>
</body>
</html>